async function renderStudent () {
    const { data: res} = await axios.get('/students')
    console.log(res)
    let arr = res.data.map(item => {
        return `
        <tr>
       <td>${item.name}</td>
       <td>${item.age}</td>
      <td>${item.gender === 0 ? '男' : '女'}</td>
       <td>第${item.group}组</td>
      <td>${item.hope_salary}</td>
      <td>${item.salary}</td>
      <td>${item.province} ${item.city} ${item.area}</td>
      <td>
        <a href="javascript:;" class="text-success mr-3"><i data-id="${item.id}" class="bi bi-pen"></i></a>
           <a href="javascript:;" class="text-danger"><i data-id="${item.id}" class="bi bi-trash"></i></a>
      </td>
    </tr>
        `
    })
    document.querySelector('tbody').innerHTML = arr.join('')
}
   renderStudent()


   let addModal = new bootstrap.Modal(document.querySelector('#modal'))

   document.querySelector('#openModal').addEventListener('click', function () {

    document.querySelector('#modal h5').innerHTML = '添加学员'
    document.querySelector('#form').reset()
    addModal.show()
   })

   async function initCity () {
    let province = document.querySelector('[name=province]')
    let city = document.querySelector('[name=city]')
    let area = document.querySelector('[name=area]')

    const { data: res} = await axios.get('/api/province')
    let arr = res.data.map(item => `<option value="${item}">${item}</option>`)
    province.innerHTML = '<option value="">省份</option>' + arr.join('')

    province.addEventListener('change', async function () {
        let pname = province.value // 获取当前选择的省的名字
        // 省切换后，无论如何，都要重置县
        area.innerHTML = '<option value="">--地区--</option>'
        // 如果没有选择省，则需要重置市
        if (pname === '') return (city.innerHTML = '<option value="">--城市--</option>')
        // 下面，正常获取对应的市，并渲染到第2个下拉框的位置
        // console.log(pname)
        const { data: res } = await axios.get('/api/city', { params: { pname } })
        // console.log(res2) // { message: '获取成功', data: ['xx市', 'xx市', 'xx市', .....] }
        let arr = res.data.map(item => `<option value="${item}">${item}</option>`)
        city.innerHTML = '<option value="">--城市--</option>' + arr.join('')
      })
      
      // 4.3 -------- 切换市的时候，获取县 -------------
      city.addEventListener('change', async function () {
        let pname = province.value // 获取当前选择的省的名字
        let cname = city.value // 获取市的名字
        // 没有选择市，要重置县
        if (cname === '') return (area.innerHTML = '<option value="">--地区--</option>')
        // 下面，正常获取对应的县，并渲染到第3个下拉框的位置
        // console.log(pname)
        const { data: res } = await axios.get('/api/area', { params: { pname, cname } })
        // console.log(res2) // { message: '获取成功', data: ['xx市', 'xx市', 'xx市', .....] }
        let arr = res.data.map(item => `<option value="${item}">${item}</option>`)
        area.innerHTML = '<option value="">--地区--</option>' + arr.join('')
      })
    }
   initCity()

   document.querySelector('#submit').addEventListener('click', async function (e) {
    e.preventDefault()
    // 获取表单各个元素的值
    let data = val(document.querySelector('#form'))
    // console.log(data)
    // 根据接口要求，数字类型的，必须用纯数字，不能使用 '20'
    data.age = +data.age // 如果使用 + 的方式转换，注意 +和变量 挨在一起
    data.gender = Number(data.gender)
    data.group = +data.group
    data.hope_salary = +data.hope_salary
    data.salary = +data.salary

    let title = document.querySelector(`#modal h5`).innerHTML
    if (title === '添加学员') {
     // console.log(data) // 此次查看，数据完全符合接口要求了，下面可以提交了
   try {
    const { data: res } = await axios.post('/students', data)
    message.success(res.message) // 使用插件提示
    renderStudent() // 更新页面数据
    addModal.hide() // 关闭弹出层
   }catch (e) {
    message.error('添加失败')
   }
    } else if (title === '修改学员') {
      try {
        let id = document.querySelector(`#modal h5`).dataset.id
       // console.log(data) // 此次查看，数据完全符合接口要求了，下面可以提交了
     const { data: res } = await axios.put(`/students/${id}`, data)
     message.success(res.message) // 使用插件提示
     renderStudent() // 更新页面数据
     addModal.hide() 
      } catch (e) {
        message.error('修改失败')
      }
    }

   
  })

  document.querySelector('tbody').addEventListener('click', async function (e) {
    let id = e.target.dataset.id
    // console.log(id)
    if (e.target.classList.contains('bi-trash')) {
      // 说明点击了删除
      message.confirm('提示', '你确定不要我了吗？', async res => {
        if (res) {
          // axios.delete(`/students/187`)
          await axios.delete(`/students/${id}`)
          message.success('删除成功')
          renderStudent() // 更新页面数据
        }
      })
    }
  
    if (e.target.classList.contains('bi-pen')) {
      let id = e.target.dataset.id
     console.log('你点击的是编辑',id)
     document.querySelector('#modal h5').innerHTML = '修改学员'
     document.querySelector('#modal h5').setAttribute('data-id', id)
     addModal.show()
     const { data: res } = await axios.get(`/students/${id}`)
     // console.log(res)
     // 获取市和县，获取后，渲染到对应的下拉框之后，才能数据回填
     let p1 = axios.get('/api/city', { params: { pname: res.data.province } })
     let p2 = axios.get('/api/area', { params: { pname: res.data.province, cname: res.data.city } })
     const [{ data: { data: c } }, { data: { data: a } }] = await Promise.all([p1, p2])
     console.log(c, a)
     // [{ data: { data: c } }, { data: { data: a } }]
     let arr2 = c.map(item => `<option value="${item}">${item}</option>`)
     document.querySelector('[name=city]').innerHTML = '<option value="">--城市--</option>' + arr2.join('')
   
     let arr3 = a.map(item => `<option value="${item}">${item}</option>`)
     document.querySelector('[name=area]').innerHTML = '<option value="">--地区--</option>' + arr3.join('')
     // val(表单) // 获取表单各项数据
     // val(表单, 数据) // 数据回填。把数据回填到表单中【要求数据的键 ==== 表单各项的name属性值】
     val(document.querySelector('#form'), res.data)
    }
  })

  